import React from 'react'
import { View, Text, Image } from '@tarojs/components'
import Taro from '@tarojs/taro'
import blueNail from '@/assets/imgs/nail/blueNail.png'
import pinkNail from '@/assets/imgs/nail/pinkNail.png'
import purpleNail from '@/assets/imgs/nail/purpleNail.png'
import yellowNail from '@/assets/imgs/nail/yellowNail.png'
import './ThingsList.scss'

const ThingsList = () => {
  const nailPaper = [
    {
      nail: blueNail,
      nailBgColor: '#cce1e2',
      title: '运动'
    },
    {
      nail: pinkNail,
      nailBgColor: '#dec8d5',
      title: '运动'
    },
    {
      nail: purpleNail,
      nailBgColor: '#cecdec',
      title: '运动'
    },
    {
      nail: yellowNail,
      nailBgColor: '#d5d4b6',
      title: '运动'
    },
    {
      nail: blueNail,
      nailBgColor: '#cce1e2',
      title: '+'
    }
  ]

  const goToDetail = () => {
    Taro.navigateTo({ url: '/views/thingsList/ThingsDetail' })
  }

  const goHome = () => {
    Taro.navigateTo({ url: '/pages/home/home' })
  }

  return (
    <View className="thingsList">
      <View className="pageTitle">
        <Text onClick={goHome} className="goBack">{'<'}</Text>
        <View className="title">事项清单</View>
      </View>

      <View>
        <View className="nailList">
          {nailPaper.map((item, index) => (
            <View
              key={index}
              className="nailItem"
              style={{ backgroundColor: item.nailBgColor }}
              onClick={goToDetail}
            >
              <Image src={item.nail} className="nailImage" />
              <Text className="navTitle" style={{ fontSize: item.title === '+' ? '30px' : '' }}>
                {item.title}
              </Text>
            </View>
          ))}
        </View>
      </View>
    </View>
  )
}

export default ThingsList